﻿@page "/NumericTextFieldPage"
@using System.ComponentModel.DataAnnotations

<PageTitle>NumericTextField | Blazor Fluent UI WebAssembly Demo</PageTitle>
<header class="root">
    <h1 class="title">NumericTextField</h1>
</header>
<div class="section" style="transition-delay: 0s;">
    <div id="overview" tabindex="-1">
        <h2 class="subHeading hiddenContent">Overview</h2>
    </div>
    <div class="content">
        <div class="ms-Markdown">
            <p>
                Number text fields (<code>NumericTextField</code>) give people a way to enter and edit numbers (<code>int, long, short, double, float, decimal</code>). They’re used in forms, modal dialogs, tables, and other surfaces where number input is required.
</p>
        </div>
    </div>
</div>
<div class="section" style="transition-delay: 0s;">
    <div id="overview" tabindex="-1">
        <h2 class="subHeading">Usage</h2>
        <p>These <code>&lt;NumericTextField&gt;</code> components can be used both within and without <code>&lt;EditForm&gt;</code> block <strong>but</strong> you don't get validation messages when you don't put them in an <code>&lt;EditForm&gt;</code></p>
    </div>
    <div>
        <div class="subSection">
            <Demo Header="TextFieldNumbers without EditForm" Key="0" MetadataPath="NumericTextFieldPage">
                <div class="textFieldDiv">
                    <NumericTextField Label="Int test" @bind-Value="model.exampleInt" @bind-Value:event="OnChange" />
                </div>
                Example int: @model.exampleInt
                <div class="textFieldDiv">
                    <NumericTextField Label="Long test" @bind-Value="model.exampleLong" />
                </div>
                Example long: @model.exampleLong
                <div class="textFieldDiv">
                    <NumericTextField Label="Short test (unbound)" Value="Int16.MinValue" />
                </div>
                <div class="textFieldDiv">
                    <NumericTextField Label="Float test (OnChange)" @bind-Value="@model.exampleFloat" @bind-Value:event="OnChange" />
                    Example float: @model.exampleFloat
                </div>
                <div class="textFieldDiv">
                    <NumericTextField Label="Double test" @bind-Value="@model.exampleDouble" />
                    Example double: @model.exampleDouble
                </div>
                <div class="textFieldDiv">
                    <NumericTextField Label="Decimal test" @bind-Value="@model.exampleDecimal" />
                    Example decimal: @model.exampleDecimal
                </div>
            </Demo>
        </div>
        <div class="subSection">
            <Demo Header="TextFieldNumbers with EditForm" Key="1" MetadataPath="NumericTextFieldPage">
                <EditForm Model=@model OnValidSubmit=@HandleValidSubmit>
                <FluentUIValidationSummary />
                <div class="textFieldDiv">
                    <NumericTextField Label="Int test" @bind-Value="model.exampleInt" @bind-Value:event="OnChange" />
                </div>
                Example int: @model.exampleInt
                <div class="textFieldDiv">
                    <NumericTextField Label="Long test" @bind-Value="model.exampleLong" />
                </div>
                Example long: @model.exampleLong
                <div class="textFieldDiv">
                    <NumericTextField TValue="short" Label="Short test (unbound)" Value="Int16.MinValue" />
                </div>
                <div class="textFieldDiv">
                    <NumericTextField Label="Float test (OnChange)" @bind-Value="@model.exampleFloat" @bind-Value:event="OnChange" />
                    Example float: @model.exampleFloat
                </div>
                <div class="textFieldDiv">
                    <NumericTextField Label="Double test" @bind-Value="@model.exampleDouble" />
                    Example double: @model.exampleDouble
                </div>
                <div class="textFieldDiv">
                    <NumericTextField Label="Decimal test" @bind-Value="@model.exampleDecimal" />
                    Example decimal: @model.exampleDecimal
                </div>
                </EditForm>
            </Demo>
        </div>
    </div>
</div>
@code {
    ExampleModel model = new ExampleModel();

    class ExampleModel
    {
        public int exampleInt { get; set; } = int.MaxValue;
        public long exampleLong { get; set; } = DateTime.Now.Ticks;
        public float exampleFloat { get; set; } = Single.MaxValue;
        public double exampleDouble { get; set; } = Double.MaxValue;
        public decimal exampleDecimal { get; set; } = Decimal.One / 3;
    }


    public void HandleValidSubmit()
    {

    }
}
